<%@ page contentType="text/html;charset=UTF-8"  language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>图书馆首页</title>
    <link rel="stylesheet" href="static/css/base.css">
    <link rel="stylesheet" href="static/css/components.css">
    <link rel="stylesheet" href="static/css/layout.css">
    <link rel="stylesheet" href="static/css/utilities.css">
    <style>
        body {
            background: url('static/img/timg.jpg') no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            padding: 0;
            height: 100vh;
        }
        .title {
            text-align: center;
            color: white;
            font-family: '华文行楷';
            font-size: 500%;
            margin-top: 50px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        #login {
            width: 400px;
            margin: 50px auto;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .panel-heading {
            background-color: transparent !important;
            border-bottom: none !important;
            padding-bottom: 0;
        }
        .panel-title {
            color: #333;
            font-size: 24px;
            text-align: center;
        }
        .btn-primary {
            width: 100%;
            margin-top: 15px;
        }
        #info {
            color: red;
            text-align: center;
            margin-top: 10px;
        }
    </style>
    <script src="static/js/jquery-3.2.1.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/js.cookie.js"></script>
</head>
<body>
<c:if test="${!empty error}">
    <script>
        alert("${error}");
        window.location.href="login.html";
    </script>
</c:if>

<h2 class="title">图 书 馆</h2>

<div class="panel panel-default" id="login">
    <div class="panel-heading">
        <h3 class="panel-title">请登录</h3>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label for="id">账号</label>
            <input type="text" class="form-control" id="id" placeholder="请输入账号">
        </div>
        <div class="form-group">
            <label for="passwd">密码</label>
            <input type="password" class="form-control" id="passwd" placeholder="请输入密码">
        </div>
        <div class="form-group" style="display:flex;align-items:center;gap:10px;">
            <input type="text" class="form-control" id="captcha" placeholder="请输入验证码" style="width:160px;">
            <img id="captchaImg" src="static/img/captcha.jpg" alt="验证码" style="height:38px;cursor:pointer;border-radius:4px;" title="看不清？点击换一张">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" id="remember">记住密码
            </label>
        </div>
        <p id="info"></p>
        <button id="loginButton" class="btn btn-primary">登录</button>
    </div>
</div>

<script>
    $("#id").keyup(
        function () {
            if(isNaN($("#id").val())){
                $("#info").text("提示:账号只能为数字");
            }
            else {
                $("#info").text("");
            }
        }
    )
    // 记住登录信息
    function rememberLogin(username, password, checked) {
        Cookies.set('loginStatus', {
            username: username,
            password: password,
            remember: checked
        }, {expires: 30, path: ''})
    }
    // 若选择记住登录信息，则进入页面时设置登录信息
    function setLoginStatus() {
        var loginStatusText = Cookies.get('loginStatus')
        if (loginStatusText) {
            var loginStatus
            try {
                loginStatus = JSON.parse(loginStatusText);
                $('#id').val(loginStatus.username);
                $('#passwd').val(loginStatus.password);
                $("#remember").prop('checked',true);
            } catch (__) {}
        }
    }

    // 设置登录信息
    setLoginStatus();
    // 多张验证码图片切换
    var captchaImages = [
        "static/img/captcha.jpg",
        "static/img/captcha1.jpg",
        "static/img/captcha2.jpg"
    ];
    $("#captchaImg").click(function(){
        var idx = Math.floor(Math.random() * captchaImages.length);
        this.src = captchaImages[idx] + "?" + Math.random();
    });
    $("#loginButton").click(function () {
        var id =$("#id").val();
        var passwd=$("#passwd").val();
        var captcha=$("#captcha").val();
        var remember=$("#remember").prop('checked');
        if (id == '') {
            $("#info").text("提示:账号不能为空");
        }
        else if( passwd ==''){
            $("#info").text("提示:密码不能为空");
        }
        else if(isNaN( id )){
            $("#info").text("提示:账号必须为数字");
        }
        else if(captcha == ''){
            $("#info").text("提示:验证码不能为空");
        }
        else {
            $.ajax({
                type: "POST",
                url: "api/loginCheck",
                data: {
                    id:id ,
                    passwd: passwd,
                    captcha: captcha
                },
                dataType: "json",
                success: function(data) {
                    if (data.stateCode.trim() === "0") {
                        $("#info").text("提示:账号或密码错误！");
                        $("#captchaImg").click(); // 刷新验证码
                    } else if (data.stateCode.trim() === "3") {
                        $("#info").text("提示:验证码错误！");
                        $("#captchaImg").click(); // 刷新验证码
                    } else if (data.stateCode.trim() === "1") {
                        $("#info").text("提示:登陆成功，跳转中...");
                        window.location.href="admin_main.html";
                    } else if (data.stateCode.trim() === "2") {
                        if(remember){
                            rememberLogin(id,passwd,remember);
                        }else {
                            Cookies.remove('loginStatus');
                        }
                        $("#info").text("提示:登陆成功，跳转中...");
                        window.location.href="reader_main.html";
                    }
                }
            });
        }
    })

</script>

</body>
</html>
